<template>
    <div class="bg-white mt10 mb10 pl5 pt10 pr5 pb10 border-bottom" @click="detail(item)">
        <van-cell class="m0 p0" :border="false" is-link>
            <template slot="title">
                <div class="flex row-between">
                    <div class="flex-1 t-b">{{item.risk_name}}</div>

                    <div class="flex col-top">
                        <van-tag class="t-n-b" color="#054fea" round v-if="item.risk_level === '001'">低</van-tag>
                        <van-tag class="t-n-b" color="#ead505" round v-if="item.risk_level === '002'">一般</van-tag>
                        <van-tag class="t-n-b" color="#eb5905" round v-if="item.risk_level === '003'">较大</van-tag>
                        <van-tag class="t-n-b" color="#eb0513" round v-if="item.risk_level === '004'">重大</van-tag>

                        <van-tag class="ml5" plain round>{{item.risk_type}}</van-tag>
                    </div>
                </div>
            </template>
        </van-cell>

        <van-cell class="m0 p0 mt5" title="风险性质" :value="item.risk_nature" :border="false"></van-cell>
        <van-cell class="m0 p0 mt5" title="管控部门" :value="item.control_department" :border="false"></van-cell>
        <van-cell class="m0 p0 mt5" title="" :label="item.hazard_name" :border="false"></van-cell>
    </div>
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                // 请求参数
                from: this.$getString(this.$route.query.from)
            }
        },
        methods: {
            detail(item) {
                this.$router.push({
                    name: `风险明细${this.from}`,
                    params: {
                        detail: item
                    }
                })
            }
        }
    }
</script>
